<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/jquery-1.9.1.min.js"></script>
    <title>Title</title>
</head>
<style type="text/css">
    #avatar{
        position: relative;
        width: 60px;
        height: 60px;
    }

    #avatar_img,#avatar_file{
        position: absolute;
        top: 0;
        left: 15px;
        width: 60px;
        height: 60px;
        border: 1px solid gray;
        border-radius: 5px;
    }

    #avatar_file{
        opacity: 0;
    }
</style>
<body>
<label for="avatar" class="col-sm-3 control-label">头像：</label>
<div class="col-sm-9" id="avatar">
    <img src="/static/img/guojia.jpg" alt="" id="avatar_img">
    <input type="file" class="form-control" id="avatar_file">
</div>

</body>
</html>
<script>

    $('#avatar_file').change(function () {
        var file = $(this)[0].files[0];
        //通过FileReader读取选中图片
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            //result中存放了选中的文件的二进制数据
            $('#avatar_img')[0].src = this.result
        }
    });

</script>